<template>
	<view class="user-profile-container">
		<view class="profile-card">
			<!-- 用户头像 -->
			<view v-if="tableName=='yonghu'" class="avatar-section" @tap="yonghuPhotoTap">
				<image class="user-avatar" 
					   :src="ruleForm.yonghuPhoto ? baseUrl+ruleForm.yonghuPhoto : '/static/default-avatar.png'"
					   mode="aspectFill"></image>
				<text class="avatar-edit">点击更换头像</text>
			</view>

			<!-- 表单字段 -->
			<template v-if="tableName=='yonghu'">
				<view class="form-item">
					<text class="form-label">账户</text>
					<input class="form-input" 
						   v-model="ruleForm.username" 
						   placeholder="请输入账户名"
						   placeholder-class="placeholder-style"/>
				</view>

				<view class="form-item">
					<text class="form-label">用户姓名</text>
					<input class="form-input" 
						   v-model="ruleForm.yonghuName" 
						   placeholder="请输入真实姓名"/>
				</view>

				<view class="form-item">
					<text class="form-label">手机号码</text>
					<input class="form-input" 
						   v-model="ruleForm.yonghuPhone" 
						   type="number"
						   placeholder="请输入11位手机号"/>
				</view>

				<view class="form-item">
					<text class="form-label">身份证号</text>
					<input class="form-input" 
						   v-model="ruleForm.yonghuIdNumber" 
						   placeholder="请输入身份证号码"/>
				</view>

				<view class="form-item">
					<text class="form-label">性别</text>
					<picker class="form-picker" 
						   @change="yonghusexTypesChange" 
						   :value="sexTypesIndex" 
						   :range="sexTypesOptions" 
						   range-key="indexName">
						<text class="picker-text">
							{{ ruleForm.sexValue || "请选择性别" }}
						</text>
						<text class="picker-arrow">▼</text>
					</picker>
				</view>

				<view class="form-item">
					<text class="form-label">电子邮箱</text>
					<input class="form-input" 
						   v-model="ruleForm.yonghuEmail" 
						   type="email"
						   placeholder="请输入常用邮箱"/>
				</view>
			</template>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="primary-btn" @tap="update">保存修改</button>
				<button class="warning-btn" @tap="logout">退出登录</button>
			</view>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				ruleForm: {},
				tableName: "",
				sexTypesOptions: [],
				sexTypesIndex: 0,
			}
		},
        computed: {
            baseUrl() {
                return this.$base.url;
            },
        },
		async onLoad() {
			let table = uni.getStorageSync("nowTable");
			let res = await this.$api.session(table);
			this.ruleForm = res.data;
			this.tableName = table;
			// 自定义下拉框值

			if (this.tableName == 'yonghu') {
            let sex_typesParams = {
                page: 1,
                limit: 100,
                dicCode: 'sex_types',
            }
				let sex_typesRes = await this.$api.page(`dictionary`, sex_typesParams);

				this.sexTypesOptions = sex_typesRes.data.list
			}
			// this.styleChange()
		},
		methods: {
			// 下拉变化
			yonghusexTypesChange(e) {
				this.sexTypesIndex = e.target.value
				this.ruleForm.sexValue = this.sexTypesOptions[this.sexTypesIndex].indexName
				this.ruleForm.sexTypes = this.sexTypesOptions[this.sexTypesIndex].codeIndex
			},
			// 日期控件
			createTimeConfirm(val) {
				this.ruleForm.createTime = val.result;
				this.$forceUpdate();
			},
			// 获取uuid
			getUUID() {
				return new Date().getTime();
			},
			logout() {
				uni.setStorageSync('token', '');
				this.$utils.jump('../login/login');
			},
			// 注册
			async update() {
					if ((!this.ruleForm.username) && `yonghu` == this.tableName) {
						this.$utils.msg(`账户不能为空`);
						return
					}
					if ((!this.ruleForm.yonghuName) && `yonghu` == this.tableName) {
						this.$utils.msg(`用户姓名不能为空`);
						return
					}
					if (`yonghu` == this.tableName && this.ruleForm.yonghu && (!this.$validate.isMobile(this
									.ruleForm.yonghuPhone))) {
						this.$utils.msg(`用户手机号应输入正确格式`);
						return
					}
					if (`yonghu` == this.tableName && this.ruleForm.yonghu && (!this.$validate.checkIdCard(this
									.ruleForm.yonghuIdNumber))) {
						this.$utils.msg(`用户身份证号应输入正确格式`);
						return
					}
					if ((!this.ruleForm.yonghuPhoto) && `yonghu` == this.tableName) {
						this.$utils.msg(`用户头像不能为空`);
						return
					}
					if (`yonghu` == this.tableName && this.ruleForm.yonghu && (!this.$validate.isEmail(this
                                    .ruleForm.yonghuEmail))) {
                        this.$utils.msg(`用户邮箱应输入正确格式`);
                        return
                    }

					let table = uni.getStorageSync("nowTable");
					await this.$api.update(table, this.ruleForm);
					this.$utils.msgBack('修改成功');
			},
			yonghuPhotoTap() {
				let _this = this;
				this.$api.upload(function(res) {
					_this.ruleForm.yonghuPhoto = 'upload/' + res.file;
					_this.$forceUpdate();
				});
			},
            toggleTab(str) {
                this.$refs[str].show();
            }

		}
	}
</script>
<style scoped>
.user-profile-container {
	padding: 40rpx;
	background: #f5f7fa;
	min-height: 100vh;
}

.profile-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
}

.avatar-section {
	text-align: center;
	margin-bottom: 40rpx;
}

.user-avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	border: 4rpx solid #fff;
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
	margin-bottom: 20rpx;
	transition: transform 0.3s;
}

.user-avatar:active {
	transform: scale(0.95);
}

.avatar-edit {
	color: #666;
	font-size: 24rpx;
	display: block;
}

.form-item {
	margin-bottom: 32rpx;
}

.form-label {
	display: block;
	color: #2d3447;
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 16rpx;
	padding-left: 12rpx;
}

.form-input {
	height: 96rpx;
	background: #f8f9fb;
	border-radius: 12rpx;
	padding: 0 28rpx;
	font-size: 28rpx;
	color: #2d3447;
	transition: all 0.2s;
}

.form-input:focus {
	background: #fff;
	box-shadow: 0 0 0 2rpx #18a05833;
}

.form-picker {
	position: relative;
	height: 96rpx;
	background: #f8f9fb;
	border-radius: 12rpx;
	padding: 0 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.picker-text {
	color: #2d3447;
	font-size: 28rpx;
}

.picker-arrow {
	color: #999;
	font-size: 24rpx;
	margin-left: 20rpx;
}

.action-buttons {
	margin-top: 60rpx;
}

.primary-btn {
	background: #18a058;
	color: #fff;
	height: 96rpx;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: 500;
	transition: opacity 0.2s;
}

.primary-btn:active {
	opacity: 0.85;
}

.warning-btn {
	background: transparent;
	color: #e54d42;
	height: 96rpx;
	border: 2rpx solid #e54d42;
	border-radius: 12rpx;
	font-size: 32rpx;
	margin-top: 30rpx;
}

.placeholder-style {
	color: #c0c4cc;
	font-size: 28rpx;
}
</style>